import React, { useState } from 'react'
import { LockOutlined, UserOutlined, CloseCircleOutlined } from '@ant-design/icons';
import { Button, Form, Input, message} from 'antd';
import { useNavigate } from 'react-router-dom'
import './Find_password.scss'
import welcome from '@/images/welcome.png'
// import { Button, Form, Input, message} from 'antd';

var Mock = require("mockjs");

var columnslist = [112, 113, 114, 115];
export default function Find_password() {
  const [form] = Form.useForm()
  const navigate = useNavigate()
  const [loading, setloading] = useState(false)
  const onFinish = (values) => {
    if (values.username1 !== '' || values.password2 !== '' || values.username2 !== '' || values.password1 !== '') {
      setloading(true)
      // localStorage.setItem("token","登录成功"); 
      message.success('修改成功!');
      setTimeout(() => {
        //   navigate('/login')
        setloading(false)
      }, 1000)
    } else {
      setloading(false)

      message.error('密码或账号错误！')
    }
  };
  const onReset = (values) => {
    navigate('/home')
    // form.resetFields();
  }
  // let users = []
  // const count = 20
  // const tokens = []
  // for (let i = 0; i < count; i++) {
  //   users.push(
  //     Mock.mock({
  //       id: i,
  //       ID: 'token' + i + Mock.Random.guid().slice(0, 13),
  //       name: Mock.Random.cname(),
  //       addr: Mock.mock('@county(true)'),
  //       'age|18-60': 1,
  //       birth: Mock.Random.date(),
  //       sex: Mock.Random.integer(0, 1),
  //       confirm: Math.floor(Math.random() * 100 + 1),
  //     })
  //   )
  //   tokens.push('token' + i + users[i].ID)
  // }
  // for (let index = 0; index < List.length; index++) {
  //   // const element = array[index];

  // }
  // console.log(List.map(v=>v.id));
  // console.log(tokens);
  // console.log(users);
  return (
    <div className="welcome1">
     荔枝病虫害大数据管理系统
      {/* rgreb */}

      <br />
      <br />
      修改密码
      <br />
      <br />
      <Form
      name="normal_login"
      className="login_form"
      form={form}
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
    >
      <Form.Item
        name="username1"
        rules={[
          {
            required: true,
            message: '请输入用户名!',
          },
        ]}
      >
        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入账号" />
      </Form.Item>
      <Form.Item
        name="username2"
        rules={[
          {
            required: true,
            message: '请输入邮箱!',
          },
        ]}
      >
        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入邮箱" />
      </Form.Item>
      <Form.Item
        name="password1"
        rules={[
          {
            required: true,
            message: '请输入密码!',
          },
        ]}
      >
        <Input
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="请输入密码"
        />
      </Form.Item>
      <Form.Item
        name="password2"
        rules={[
          {
            required: true,
            message: '请再次输入密码!',
          },
        ]}
      >
        <Input
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="请再次输入密码"
        />
      </Form.Item>
      {/* <Button type="link" htmlType="submit" className="login-form-button" icon={<UserOutlined />} size="large" loading={loading}>找回密码</Button> */}

      <Form.Item>
        <div className="loginButton">
          {/* <Button icon={<CloseCircleOutlined />} size="large" onClick={onReset}>返回首页</Button> */}
          <Button type="primary" htmlType="submit" className="login-form-button" icon={<UserOutlined />} size="large" loading={loading}>重置密码</Button>
        </div>
      </Form.Item>
    </Form>
      {/* <img src={welcome} alt="" /> */}
    </div>
  )
}
